import React from 'react'
import PropTypes from 'prop-types'
import {Card,Icon,Form,Input,Select,Button} from 'antd'
import {buildEmpty} from '../../Util'
const FormItem = Form.Item
const SelectOption = Select.Option
const itemLayout = {
  labelCol: {
    span:8
  },
  wrapperCol: {
    span:14
  },
}
class ShopForm extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      shops:props.shops,
      keys:[0],
    }
  }
  componentWillMount(){
    this.props.setForm(this.props.form)
  }
  handleRemoveShop(index){
    const {shops} = this.props
    if(shops != null && shops.length > 1){
      shops.splice(index,1)
      this.props.onChange({shops:shops})
    }
  }
  handleAddShop(){
    let {shops} = this.props
    shops = shops.concat({})
    this.props.onChange({shops:shops})
  }
  render(){
    const {form} = this.props
    const {getFieldDecorator} = form
    const {shops} = this.props
    return <Form>
      {shops.map(({shopName,shopType,shopUrl,platformId},index)=>(
        <Card key = {'shopItem'+ index} title={'店铺'+(index + 1)}  bordered={false} style={{margin:'5px 0'}} extra={<Icon type="delete" className="close-icon-btn" onClick={this.handleRemoveShop.bind(this,index)} disabled={shops.length === 1}/>}>
          <FormItem label={'店铺名称'} hasFeedback {...itemLayout}>
            {getFieldDecorator('shops['+index+'].shopName', {
              initialValue:buildEmpty(shopName),
              rules: [{ required: true, message: '请输入店铺名称' }],
            })(<Input/>)}
          </FormItem>
          <FormItem label={'店铺类型'} hasFeedback {...itemLayout}>
            {getFieldDecorator('shops['+index+'].shopType',{
              initialValue:buildEmpty(shopType),
              rules: [{ required: true, message: '请输入店铺类型' }],
            })(<Input/>)}
          </FormItem>
          <FormItem label={'店铺链接'} hasFeedback {...itemLayout}>
            {getFieldDecorator('shops['+index+'].shopUrl', {
              initialValue:buildEmpty(shopUrl),
              rules: [{ required: true, message: '请输入店铺链接' }],
            })(<Input/>)}
          </FormItem>
          <FormItem label={'平台'} {...itemLayout}>
            {getFieldDecorator('shops['+index+'].platformId',{
              initialValue:buildEmpty(platformId),
              rules: [{ required: true, message: '请选择平台' }],
            })(
              <Select style={{ width: 120 }} placeholder="请选择平台">
                <SelectOption value="0">淘宝</SelectOption>
                <SelectOption value="1">天猫</SelectOption>
                <SelectOption value="2" disabled>京东</SelectOption>
              </Select>)}
          </FormItem>
        </Card>
      ))}
      <div style={{margin:'15px 0 0',textAlign:'center'}}>
          <Button size="small" type="dashed" onClick={this.handleAddShop.bind(this)} style={{ width: '200px' ,lineHeight: '30px',height:30}}>
            <Icon type="plus" /> 添加店铺
          </Button>
        </div>
    </Form>
  }
}

ShopForm.propTypes = {
  form:PropTypes.object.isRequired,
  shops:PropTypes.array.isRequired,
  setForm:PropTypes.func,
  onChange:PropTypes.func.isRequired,
}

ShopForm.defaultProps = {
  setForm:()=>{}
}

export default Form.create({
  onFieldsChange(props){
    props.onChange()
  }
})(ShopForm)